<template>
  <div class="content">
    <van-sticky>
      <div class="head">
        <img class="head-back-img" @click="goBack" src="../assets/back.svg" alt="">
        <div class="title">卡券</div>
      </div>
      <div class="tab">
        <div v-for="x in tabList" :class="x.type === type ? 'sel' : ''" @click="handleType(x.type)">
          <span v-if="x.type === 1">{{ x.name }}({{ total }})</span>
          <span v-if="x.type === 2">{{ x.name }}({{ totalCopy }})</span>
        </div>
      </div>
    </van-sticky>
    <div class="card" v-if="type === 1">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="card-list">
            <!-- :style="{ backgroundImage: item.cardImagePath ? 'url(' + item.cardImagePath + ')' : 'none' }" -->
            <div v-for="(item, index) in list" :key="index" :title="item" class="sum" @click.stop="getDatial(item)"
              :style="{ backgroundImage: item.cardImagePath ? 'url(' + item.cardImagePath + ')' : 'none' }">
              <div class="top">
                <div class="left">
                  <div>卡号：{{ item.cardNo }}</div>
                  <div v-if="item.cardMode === '1'">观影次数卡</div>
                  <div v-if="item.cardMode === '2'">积分卡</div>
                  <div v-if="item.cardMode === '1'">
                    <span>总</span>
                    <span>{{ item.faceValue }}</span>
                    <span>次 </span>
                    <span>|</span>
                    <span>已用</span>
                    <span>{{ item.faceValue - item.balance }}</span>
                    <span>次</span>
                  </div>
                  <div>
                    {{ item.validStartDate }}至{{ item.validEndDate }}
                  </div>
                </div>
                <div class="right">
                  <div v-if="item.cardMode === '1'">
                    <div>{{ item.balance }}</div>
                    <div>剩余次数</div>
                  </div>
                  <div v-if="item.cardMode === '2'">
                    <div>{{ item.balance }}</div>
                    <div>剩余积分</div>
                  </div>
                </div>
              </div>
              <div class="bot">
                <div>{{ item.description }}</div>
                <div v-if="item.cardMode === '1'" @click.stop="beginEye(1)">立即使用</div>
                <div v-if="item.cardMode === '2'" @click.stop="beginEye(2)">立即兑换</div>
              </div>

            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="card" v-if="type === 2">
      <van-pull-refresh v-model="isLoadingCopy" @refresh="onRefreshCopy">
        <van-list v-model="loadingCopy" :finished="finishedCopy" finished-text="没有更多了" @load="onLoadCopy">
          <div class="card-list">
            <div class="sum expire" v-for="(item, index) in listCopy" :key="index" :title="item"
              @click.stop="getDatial(item)"
              :style="{ backgroundImage: item.cardImagePath ? 'url(' + item.cardImagePath + ')' : 'none' }">
              <div class="top">
                <div class="left">
                    <div>卡号：{{ item.cardNo }}</div>
                  <div v-if="item.cardMode === '1'">观影次数卡</div>
                  <div v-if="item.cardMode === '2'">积分卡</div>
                  <div v-if="item.cardMode === '1'"><span>总</span><span style="color:rgb(149,154,165);">{{
                    item.faceValue
                  }}</span><span>次
                    </span><span>|</span><span>已用</span><span style="color:rgb(149,154,165);">{{ item.faceValue -
                      item.balance }}</span><span>次</span></div>
                  <div>
                    {{ item.validStartDate }}至{{ item.validEndDate }}
                  </div>
                </div>
                <div class="right">
                  <div v-if="item.cardMode === '1'">
                    <div>{{ item.balance }}</div>
                    <div>剩余次数</div>
                  </div>
                  <div v-if="item.cardMode === '2'">
                    <div>{{ item.balance }}</div>
                    <div>剩余积分</div>
                  </div>
                </div>
              </div>
              <div class="bot">
                <div>{{ item.description }}</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import plantAPI from "@/api/plant";
import bgImage from '../assets/order/bg1.png';
export default {
  data() {
    return {
      bgImage: bgImage,
      tabList: [{ type: 1, name: '有效卡券' }, { type: 2, name: '无效卡券' }],
      type: 1,
      list: [],
      loading: false,
      finished: false,
      listCopy: [],
      loadingCopy: false,
      finishedCopy: false,
      pageNum: 1,
      pageSize: 10,
      pageNumCopy: 1,
      total: 0,
      totalCopy: 0,
      statusList: ['初始', '已激活', '已用完', '已过期', '锁定'],
      showPopover: false,
      selectId: -1,
      isLoading: false,
      isLoadingCopy: false
    }
  },
  created() {
    this.onLoadCopy()
  },
  methods: {
    getDatial(item) {
      this.$router.push({
        path: '/cardUsageRecord',
        query: {
          cardId: item.id
        }
      })
    },
    onRefresh() {

      setTimeout(() => {
        this.pageNum = 1;
        this.list = [];
        this.initData()
        this.isLoading = false;
      }, 1000);
    },
    onRefreshCopy() {
      setTimeout(() => {
        this.pageNumCopy = 1;
        this.listCopy = [];
        this.initDataCopy()
        this.isLoadingCopy = false;
      }, 1000);
    },
    beginEye(status) {
      if (status == 1) {
        this.$router.push({
          path: '/films'
        })
      } else {
        this.$router.push({
          path: '/welfare'
        })
      }

    },
    handleSel(e) {
      this.selectId = e;
      this.showPopover = true;
    },
    onLoad() {
      this.initData()
    },
    onLoadCopy() {
      this.initDataCopy()
    },
    initData() {
      this.loading = true;
      plantAPI.centerCardList({
        cardStatus: '1',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        const result = res.rows;
        result.forEach(item => {
          this.list.push(item)
        })
        this.total = res.total;
        this.loading = false;
        if (this.list.length !== res.total) {
          this.finished = false;
          this.pageNum++;
        } else {
          this.finished = true;
        }
      })
    },
    initDataCopy() {
      this.loadingCopy = true;
      plantAPI.centerCardList({
        cardStatus: '2',
        pageNum: this.pageNumCopy,
        pageSize: this.pageSize
      }).then(res => {
        const result = res.rows;
        result.forEach(item => {
          this.listCopy.push(item)
        })
        this.totalCopy = res.total;
        this.loadingCopy = false;
        if (this.listCopy.length !== res.total) {
          this.finishedCopy = false;
          this.pageNumCopy++;
        } else {
          this.finishedCopy = true;
        }
      })
    },
    handleType(type) {
      this.type = type
      if (this.type === 1) {
        this.pageNum = 1;
        this.list = []
        this.onLoad()
      } else {
        this.pageNumCopy = 1;
        this.listCopy = []
        this.onLoadCopy()
      }
    },
    goBack() {
      this.$router.push({
        path: '/user'
      })
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-sticky {
  background: #FFFFFF;
}

::v-deep .van-pull-refresh {
  // height: calc(100vh - 50px);
}

.content {
  width: 100%;
  min-height: 100vh;
  /* 确保容器撑满整个视口 */
  background-color: rgba(246, 245, 245, 1);

  .head {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative; // 关键：设置相对定位
    background-color: #ffffff;

    .head-back-img {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 15px;
    }

    .title {
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: #000000;
    }
  }

  .tab {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    background-color: rgba(246, 245, 245, 1);
    justify-content: space-between;

    >div {
      width: calc(50% - 10px);
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      background-color: #FFFFFF;
      color: rgba(16, 16, 16, 1);
    }

    .sel {
      color: rgba(233, 157, 66, 1);
    }
  }

  .card {
    width: 100%;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;

  }

  .card-list {
    width: 100%;

    .sum {
      width: 100%;
      padding: 15px 18px;
      height: 190px;
      box-sizing: border-box;
      border-radius: 6px;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;

      /* 确保图片不会溢出 */
      /* 背景图片容器 */
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: 100% 100%;
        /* 完全填充容器 */
        background-position: center;
        background-repeat: no-repeat;
        background-image: inherit;
        /* 继承父元素的背景图 */
        z-index: 0;
      }

      /* 半透明遮罩 */
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 6px;
        z-index: 1;
      }

      .top,
      .bot {
        position: relative;
        z-index: 2;
        /* 确保内容在最上层 */
      }

      .top,
      .bot {
        position: relative;
        z-index: 1;
      }

      .top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;

        .left {
          >div:nth-child(1) {
            color: #1e1d1d;
            font-size: 16px;
          } >div:nth-child(2) {
            color: #060606;
            font-size: 14px;
              margin: 10px 0;
          }

          >div:nth-child(3) {
            font-size: 14px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            color: #060606;

            >span:nth-child(5) {
              margin: 0 5px;
            }

            >span:nth-child(3) {
              color: rgb(255, 89, 122);
              font-weight: bold;
              // margin-top: 3px;
            }

            >span:nth-child(7) {
              color: rgb(255, 89, 122);
              font-weight: bold;
              // margin-top: 3px;
            }
          }

          >div:nth-child(4) {
            color: #060606;
            font-size: 12px;
          }
        }

        .right {
          display: flex;
          align-items: center;

          >div {

            >div:nth-child(1) {
              font-size: 20px;
              font-weight: bold;
              text-align: right;
              color: rgba(233, 157, 66, 1);
            }

            >div:nth-child(2) {
              font-size: 12px;
              text-align: center;
              color: #060606;
            }
          }
        }
      }

      .bot {
        width: 100%;
        padding: 10px 0 0 0;
        box-sizing: border-box;
        border-top: 1px solid #eeeeee;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >div:nth-child(1) {
          width: calc(100% - 84px);
          color: #060606;
          font-size: 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        >div:nth-child(2) {
          width: 64px;
          height: 26px;
          line-height: 26px;
          border-radius: 17px;
          background-color: rgba(246, 57, 13, 1);
          color: #FFFFFF;
          font-size: 12px;
          text-align: center;
        }
      }
    }

    .expire {
      background-color: #ffffff;

      // &::before {
      //   background: rgba(255, 255, 255, 0.9);
      // }

      .top {
        .left {
          >div:nth-child(2) {
            color: rgb(149, 154, 165) !important;
          }
        }

        .right {
          >div {
            >div:nth-child(1) {
              color: rgb(149, 154, 165);
            }
          }
        }
      }

      .bot {
        >div {
          width: 100% !important;
        }
      }
    }
  }
}
</style>
